<template>
    <div class="msg-list">
        <template v-if="list.length">
            <list-item
                v-for="(item) in list" 
                :key="item.id"
                :data="item"
                :type="type"
            />
            <!-- <list-item/>
            <list-item/>
            <list-item/>
            <list-item/> -->
            <div class="load-history" v-if="page.status == 0" @click="loadHistory">点击查看历史消息</div>
            <uni-load-more v-if="page.status == 1" :status="loadStatus" :contentText="contentText" :iconSize="18"></uni-load-more>
        </template>
        <template v-else>
            <Empty :text="`暂无${titleMap[type]}`" bg-color="#F6F8FC"/>
        </template>
    </div>
</template>

<script>
    import ListItem from './components/list-item.vue'
    import Empty from '@/components/no-data.vue'
    import { apiListMsg } from '@/api/message'
    export default {
        components: {
            ListItem,
            Empty
        },
        data() {
            return {
                page: {
                    status: 0, // 0-未读 1-已读
                    pageSize: 10,
                    pageNum: 1
                },
                type: 1, // 1=系统通知，2=评论通知，3=点赞通知
                list: [],
                contentText: {
                    contentdown: '', //查看更多
                    contentrefresh: '加载中',
                    contentnomore: '- 已经到底了 -'
                },
                loadStatus: 'more',
                titleMap: {
                    1: '通知',
                    2: '评论',
                    3: '点赞',
                }
            }
        },
        onLoad(option){
            uni.setNavigationBarTitle({
                title: this.titleMap[option.type]
            })
            this.type = option.type || 1
            this.getList()
        },
        onReachBottom(){
            if(this.loadStatus != 'noMore' && this.page.status == 1) {
                this.page.pageNum++
                this.getList()
            }
        },

        methods: {
            loadHistory(){
                this.page.status = 1
                this.getList()
            },
            getList(){
                this.$tip.loading()
                this.loadStatus = 'loading'
                apiListMsg({
                    ...this.page,
                    type: this.type
                }).then((res) => {
                    if(res.code == 200){
                        if(this.page.status == 0 && res.data.total == 0){
                            this.page.status = 1
                            this.page.pageNum = 1
                            this.getList()
                        }
                        this.list = [...this.list, ...res.data.rows || []]
                        if(this.list.length >= res.data.total && this.page.status == 1){
                            this.loadStatus = 'noMore'
                        }
                    }
                }).catch(err => {
                    console.log(err, 'err')
                }).finally(res => {
                    this.$tip.loaded()
                })
            }
        },
    }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    @function toRem($rpx){  //$rpx为需要转换的字号
        @return #{$rpx * 100 / 750 / 4}rem; 
    }
    .msg-list{
        background-color: #F6F8FC;
        min-height: 100%;
        padding: toRem(16) toRem(30) 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        .load-history{
            font-size: toRem(24);
            color: #999;
            text-align: center;
            margin-bottom: toRem(30);
        }
    }
 
</style>

